<template>
  <div class="FcCheckBox">
    <el-checkbox-group v-model="showValue">
      <el-checkbox v-for="(item, index) in options"
                   :key="item[valueKey]"
                   size="small"
                   :value="item[valueKey]">
        {{ item[labelKey] }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script setup name="FcCheckBox">
import {isNotEmptyArray} from "@/views/flow/tool.js";
const attrs = useAttrs();
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  },
  valueKey: {
    type: String,
    default: 'value'
  },
  labelKey: {
    type: String,
    default: 'label'
  }
});
const showValue = computed({
  get() {
    return isNotEmptyArray(props.modelValue) ? props.modelValue.map(v => v[props.valueKey]) : [];
  },
  set(val) {
    const selectedItems = props.options.filter(item => val.includes(item[props.valueKey]));
    emits("update:modelValue",
        selectedItems);
  }
});
</script>
<style scoped lang="scss">
.FcCheckBox {
}
</style>
